<template>
    <el-dialog title="选择商品" width="1400px" :visible.sync="dialogVisible" top="10vh">
        <div class="flex">
            <el-tree class="vs-tree-box" ref="tree" :data="data" node-key="id" :props="{ label: 'title', children: 'child', isLeaf: 'id' }" :expand-on-click-node="false" @node-click="handleNodeClick" style="border: 1px solid #ebeef5; width: 200px; margin-right: 20px"></el-tree>
            <div style="width: 1140px">
                <el-input placeholder="请输入商品系列或商品编码" clearable v-model="paging.keywords" style="width: 260px">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <el-button type="primary" style="margin-left: 20px" @click="handleCurrentChange(1)">查询</el-button>
                <el-table :data="dataList" row-key="id" v-loading="loading" max-height="530" ref="goods" class="vs-m-t-10" key="1">
                    <el-table-column type="selection" :selectable="selectInit" width="55" reserve-selection align="center"> </el-table-column>
                    <el-table-column prop="number" label="商品编码" align="center" :key="1"> </el-table-column>
                    <el-table-column prop="title" label="商品系列" align="center" :key="2"> </el-table-column>
                    <template v-if="paging.type == 1 || paging.type == 2 || paging.type == 6">
                        <el-table-column prop="roughcast" label="毛坯种类" align="center" :key="7"> </el-table-column>
                    </template>
                    <template v-if="paging.type == 6">
                        <el-table-column prop="item" label="款号" align="center" :key="3"> </el-table-column>
                    </template>
                    <template v-if="paging.type == 1 || paging.type == 2">
                        <el-table-column prop="needle" label="递针类型" align="center" :key="4"> </el-table-column>
                        <el-table-column prop="sex" label="性别" align="center" :key="5"> </el-table-column>
                        <el-table-column prop="length" label="长度" align="center" :key="6"> </el-table-column>
                    </template>
                    <template v-if="paging.type == 1 || paging.type == 2 || paging.type == 6">
                        <el-table-column prop="size" label="尺寸" align="center" :key="8"> </el-table-column>
                        <el-table-column prop="colour" label="颜色" align="center" :key="9"> </el-table-column>
                    </template>
                    <template v-if="paging.type == 3 || paging.type == 4 || paging.type == 5">
                        <el-table-column prop="sku_text" label="规格" align="center" :key="10"> </el-table-column>
                        <el-table-column prop="unit" label="单位" align="center" :key="11"> </el-table-column>
                    </template>
                    <el-table-column prop="stock_count" label="库存" align="center" :key="12"> </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="paging.page" :page-sizes="[100, 200, 500, 1000]" :page-size="paging.limit" layout="total,sizes,prev, pager, next, jumper" :total="paging.total"> </el-pagination>
                </div>
                <span slot="footer" class="dialog-footer" style="display: flex; align-items: center; justify-content: center; margin-top: 20px">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="affirm" :loading="isBtn" style="margin-left: 30px">确 定</el-button>
                </span>
            </div>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: 'ChoiceGoods',
        props: {
            isStock: {
                type: Boolean,
                default: false,
            },
            warehouse_id: {
                type: String,
                default: '',
            },
            type: {
                // 默认查毛坯
                type: String,
                default: '1',
            },
            value: {
                type: Boolean,
                default: false,
            },
            btnLoading: {
                //是否开启按钮loading模式
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                input: '',
                dataList: [],
                loading: false,
                isMenu: false,
                isBtn: false,
                paging: {
                    type: '1',
                    keywords: '',
                    category_two_id: '',
                    category_id: '',
                    page: 1,
                    total: 0,
                    limit: 100,
                },
                categoriesList: [],
                data: [],
            };
        },
        computed: {
            dialogVisible: {
                set(val) {
                    this.$emit('input', val);
                },
                get() {
                    return this.value;
                },
            },
        },
        async created() {
            this.loading = true;
            await this.chooseGoods();
            this.getCategoryGoodsLists();
        },
        methods: {
            //已提交验证
            selectInit(row, index) {
                if (this.isStock && row.stock_count <= 0) {
                    return false; //不可勾选
                } else {
                    return true; //可勾选
                }
            },
            affirm() {
                let list = this.$refs.goods.selection;
                if (list.length) {
                    if (this.btnLoading) {
                        this.isBtn = true;
                        this.$emit('change', list, () => {
                            this.dialogVisible = false;
                            this.isBtn = false;
                        });
                    } else {
                        this.$emit('change', list);
                        this.dialogVisible = false;
                    }
                } else this.$message.error('请选择要添加的商品');
            },
            qww(list, id, pid, fus, zid) {
                return list.map((v) => {
                    v.fid = id;
                    v.pid = pid;
                    v.zid = zid;
                    if (fus) {
                        for (let i in fus) {
                            fus[i].pid = v.pid;
                        }
                        v.fulis = fus;
                    }
                    v.child = this.qww(
                        v.child,
                        id,
                        v.id,
                        list.map((v2) => ({ id: v2.id, title: v2.title })),
                        v.fulis.find((val) => val.id == v.pid).pid
                    );
                    return v;
                });
            },
            // 获取商品分类
            async chooseGoods() {
                let { code, data } = await this.$Http.getGoodsCategory();
                if (code) {
                    data.forEach((v) => {
                        v.child = this.qww(
                            v.child,
                            v.id,
                            v.id,
                            data.map((v2) => ({ id: v2.id, title: v2.title })),
                            v.id
                        );
                    });
                    this.categoriesList = data;
                    console.log(this.categoriesList);

                    if (this.type) {
                        // 传6 表示标准成品,定死id：352
                        this.data = [this.categoriesList.find((item) => item.id == (this.type == 6 ? 352 : this.type))];
                        this.paging.type = this.type;
                    } else {
                        this.data = this.categoriesList;
                        this.paging.type = 1;
                    }
                }
            },
            async getCategoryGoodsLists() {
                // 默认为毛坯
                this.paging.warehouse_id = this.warehouse_id;
                console.log(this.warehouse_id, 'this.warehouse_id');
                this.$refs.tree.setCurrentKey(1);
                this.loading = true;
                let { code, data } = await this.$Http.getCategoryGoodsLists(this.paging);
                this.loading = false;
                if (code) {
                    this.dataList = data.data;
                    this.paging.total = data.total;
                }
            },
            handleNodeClick(data) {
                console.log(data);
                if (data.level == 1) {
                    this.paging.type = data.id == 352 ? 6 : data.id;
                    this.paging.category_two_id = '';
                    this.paging.category_id = '';
                } else if (data.level == 2) {
                    // 区分是否id 为352的标准商品，如果不是走正常规则，是则重新配置
                    if (data.fid == 352) {
                        this.paging.sex_type = data.id;
                        this.paging.type = data.pid == 352 ? 6 : data.pid;
                        this.paging.category_two_id = '';
                        this.paging.category_id = '';
                    } else {
                        this.paging.type = data.pid == 352 ? 6 : data.pid;
                        this.paging.category_two_id = data.id;
                        this.paging.category_id = '';
                    }
                } else if (data.level == 3) {
                    // 区分是否id 为352的标准商品，如果不是走正常规则，是则重新配置
                    if (data.fid == 352) {
                        this.paging.sex_type = data.pid;
                        this.paging.type = data.fid == 352 ? 6 : data.fid;
                        this.paging.category_two_id = data.id;
                        this.paging.category_id = '';
                    } else {
                        this.paging.type = data.fid == 352 ? 6 : data.fid;
                        this.paging.category_two_id = data.pid;
                        this.paging.category_id = data.id;
                    }
                } else if (data.level == 4) {
                    //只有标准成品有4级分类
                    this.paging.sex_type = data.zid;
                    this.paging.type = data.fid == 352 ? 6 : data.fid;
                    this.paging.category_two_id = data.pid;
                    this.paging.category_id = data.id;
                }
                this.getCategoryGoodsLists();
            },
            handleSizeChange(val) {
                this.paging.limit = val;
                this.getCategoryGoodsLists();
            },
            handleCurrentChange(val) {
                this.paging.page = val;
                this.getCategoryGoodsLists();
            },
        },
    };
</script>

<style lang="scss" scoped>
    ::v-deep {
        .el-checkbox__input.is-disabled .el-checkbox__inner {
            background-color: #edf2fc;
        }
    }
</style>
